<template>
     <div class="griod_top" style="width: 100%; height: 30%;border: solid 1px #ccc;">
                <div style="display: flex; margin-top: 5%;">
                  <span style="color: blueviolet; width: 35%; margin-left: 10%;">9000</span><span style="color: blue; flex: 1;">8800</span><span style="color: yellow; margin-right: 10%;">2453</span>
                </div>
                    <div style="display: flex;">
                  <span style="color: blueviolet; width: 35%; margin-left: 10%"><img src="../../../public/images/人员.png" alt="" style="width: 25px; margin-left: 5%;"></span><span style="color: blue; flex: 1;"><img src="../../../public/images/人员(1).png" alt="" style="width: 25px;"></span><span style="color: yellow;margin-right: 12%;"><img src="../../../public/images/人员(2).png" alt="" style="width: 25px; margin-right: 10%;"></span>
                </div>
              </div>
              <div class="groid_botton" style="width: 100%; height: 70%; border: solid 1px #ccc;">
                  <dv-capsule-chart :config="config" style="width:17rem;height:11rem" >
         
                 </dv-capsule-chart>
              </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
const config = reactive({
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 123
    },
    {
      name: '漯河',
      value: 98
    },
    {
      name: '郑州',
      value: 75
    },
    {
      name: '西峡',
      value: 66
    },
  ],
  colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
  // unit: '万元',
  // labelNum: 8,
})
</script>

<style scoped>
   
</style>